<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>自定义对话框新增/编辑</title>
    <#include "/pubHeadStyle.html">
    <link rel="stylesheet" href="${ctx}/css/form.css">
</head>
<body>
<form class="layui-form" style="background: #fff;" lay-filter="myDialogForm">
    <div class="layui-btn-container" style="position: absolute;bottom: 0;left:42%">
        <a class="layui-btn" lay-submit lay-filter="dialogForm">保存</a>
        <a class="layui-btn layui-btn-danger cancel">取消</a>

    </div>
    <div class="formQuerySearch">
        <textarea id="textarea" style="display: none"></textarea>
        <div class="layui-form-item" style="padding-top:14px;">
            <div class="layui-inline" style="width: 100%">
                <label class="layui-form-label" style="width: 89px;">对话框名称: <span
                        style="color:red;">*</span></label>
                <div class="layui-input-inline" style="width: 220px;">
                    <input type="text" name="name" id="dialogName" class="layui-input"
                           autocomplete="off" lay-verify="required" maxlength="12"/>
                </div>
                <div style="">
                    <label class="layui-form-label">对话框别名:<span style="color:red;">*</span> </label>
                    <div class="layui-input-inline" style="width: 220px;">
                        <input type="text" name="alias" id="dialogAlias" class="layui-input" lay-verify="required" maxlength="12"/>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline" style="width: 100%">
                <label class="layui-form-label" style="width: 89px;">对话框宽度: </label>
                <div class="layui-input-inline" style="width: 220px;">
                    <input type="text" name="width" id="dialogWidth" class="layui-input"
                           autocomplete="off" lay-verify="number" value="800"/>
                </div>
                <div style="">
                    <label class="layui-form-label">对话框高度:</label>
                    <div class="layui-input-inline" style="width: 220px;">
                        <input type="text" name="height" id="dialogHeight" class="layui-input" lay-verify="number"
                               value="600"/>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline" style="width: 100%">
                <label class="layui-form-label" style="width: 89px;">是否单选: </label>
                <div class="layui-input-inline" style="width: 220px;">
                    <input type="radio" name="issingle" value="1" title="单选" lay-filter="switch" checked="">
                    <input type="radio" name="issingle" value="0" title="多选" lay-filter="switch">
                </div>
                <label class="layui-form-label">显示样式: </label>
                <div class="layui-input-inline" style="width: 220px;" id="showStyle">
                    <input type="radio" name="dialogStyle" value="0" title="列表" lay-filter="dialogStyle" checked="">
                    <input type="radio" name="dialogStyle" value="1" title="树形" lay-filter="dialogStyle">
                </div>

            </div>
        </div>
        <div class="layui-form-item pageInfo">
            <div class="layui-inline" style="width: 100%">
                <div class="page">
                    <label class="layui-form-label" style="width: 90px;">是否分页:</label>
                    <div class="layui-input-inline" style="width: 210px;margin-top:5px;">
                        <input type="radio" name="needpage" value="1" title="分页" checked lay-filter="paging">
                        <input type="radio" name="needpage" value="0" title="不分页" lay-filter="paging">
                    </div>
                    <div class="isPages">
                        <label class="layui-form-label" style="width: 90px;">分页大小:</label>
                        <span class="isPage" id="pages">
                                        <select name="pagesize">
                                            <option value="5">5 条/页</option>
                                            <option value="10">10 条/页</option>
                                            <option value="15">15 条/页</option>
                                            <option value="20" selected>20 条/页</option>
                                            <option value="50">50 条/页</option>
                                        </select>
                                    </span>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item" id="editHidden">
            <div class="layui-inline">
                <label class="layui-form-label" style="width: 89px;">数据源: </label>
                <div class="" style="float:left;width: 200px;">
                    <select name="dsalias" id="dataSource">
                        <option value="LOCAL">本地数据源</option>
                    </select>
                </div>
                <div style="float: left;margin-left: 18px; position: relative">
                    <label class="layui-form-label" style="width: 100px">查询表(视图): </label>
                    <div style="float: left;" class="tableSelect">
                        <select name="istable" id="isTable" style="">
                            <option value="1">表</option>
                            <option value="0">视图</option>
                        </select>
                        <input class="layui-input" id="objectName" style="width: 131px;">
                    </div>
                    <div class="election">
                        <button type="button" class="layui-btn layui-btn-sm choice">
                            <i class="layui-icon layui-icon-search"></i>
                        </button>
                    </div>
                </div>
            </div>

        </div>
    </div>
</form>
<div class="layui-form-item">
    <div class="layui-inline">
        <label class="layui-form-label" style="width: 89px;">查询字段设置: </label>
        <div class="layui-input-block" style="margin-left:118px">
            <button type="button" class="layui-btn layui-btn-sm" style="display:none;margin:5px;margin-left:0"
                    id="setCol">设置列
            </button>
            <script type="text/html" id="headerToolBar">
                <button type="button" class="layui-btn layui-btn-sm" style="margin:5px;margin-left:0"
                        lay-event="setCol">设置列
                </button>
            </script>
            <div style="width: 570px">
                <table id="tableList" lay-filter="tableList"></table>
            </div>
        </div>
    </div>
</div>
<script>
    layui.config({
        base: serverPath.formPath + staticPath.formPath //静态资源所在路径
    }).extend({
        index: 'index' //主入口模块
    }).use(['index', 'commons','jquery', 'layer', 'table','setter'], function () {
        var form = layui.form, layer = layui.layer, table = layui.table;
        var setter = layui.setter, commons = layui.commons;
        var $ = layui.jquery;
        form.render();
        var formDialogId = '${formDialogId}';
        var showStyle = $("input[name='dialogStyle']").val();
        //监听单选
        form.on('radio(paging)', function (data) {
            if (data.value === '0') {
                $('.isPages').css("display", "none");
            } else if (data.value === '1') {
                $('.isPages').css("display", "block");
            }
            form.render();
        });
        //监听对话框样式选项
        form.on('radio(dialogStyle)', function (data) {
            showStyle = data.value;
            if (data.value === '1') {
                $('.pageInfo').css("display", "none");
            } else if (data.value === '0') {
                $('.pageInfo').css("display", "block");
            }
            form.render();
        });
        if (formDialogId === "") {//添加
            //加载空表格
            var result = [];
            loadTable(result,'请根据数据源来查询表并且选择其中一张表');
            //获取全部数据源
            $.ajax({
                url: serverPath.systemPath + setter.sysLinkPath + 'dataSource/listAll',
                type: "post",
                dataType: 'json',
                success: function (result) {
                    if (result.data.length > 0) {
                        var text = "";
                        for (var i = 0; i < result.data.length; i++) {
                            text += "<option value='" + result.data[i]["alias"] + "'>" + result.data[i]["alias"] + "</option>"
                        }
                        $("#dataSource").append(text);
                        form.render('select');
                    }
                }
            });
        } else {//编辑
            form.val('myDialogForm', {
                "name": "${formDialog.name}",
                "alias": "${formDialog.alias}",
                "width": decibelRemoval("${formDialog.width}"),
                "height": decibelRemoval("${formDialog.height}"),
                "issingle": "${formDialog.issingle}",
                "pagesize": "${formDialog.pagesize}",
                "needpage": "${formDialog.needpage}"
            });
            $("#setCol").attr("style", "margin:5px;margin-left:0");
            $("#editHidden").attr("style", "display:none");
            $("#tableList").attr("style", "display:none");
            objectName = '${formDialog.objname}';
            if ('${formDialog.needpage}' == 0) {
                $(".isPages").attr("style", "display:none");
            }
            var style = '${formDialog.style}';
            $("#showStyle").html("<span style='display: inline-block;margin-top:8px'>列表</span>");
            var displayfield;
            if (style === '1') {
                $("#showStyle").html("<span style='display: inline-block;margin-top:8px;'>树形</span>");
                displayfield = '${formDialog.displayfield}';
                $('.pageInfo').css("display", "none");
            } else if (style === '0') {
                displayfield = JSON.parse('${formDialog.displayfield}');
            }
            $("#textarea").text(JSON.stringify({
                "conditionfield": JSON.parse('${formDialog.conditionfield}'),
                "resultfield": JSON.parse('${formDialog.resultfield}'),
                "sortfield": JSON.parse('${formDialog.sortfield}'),
                "displayfield": displayfield
            }));
        }

        //去除千分位
        function decibelRemoval(num) {
            if (num  == "") {
                return "";
            }
            num = num.replace(/,/gi, '');
            return num;
        }

        //编辑页面下 设置列按钮
        $("#setCol").click(function () {
            parent.layer.open({
                type: 2,
                title: "设置列",
                shade: 0.3,
                area: ['1100px', '600px'],
                content: serverPath.formPath + setter.formLinkPath + "formDialog/view/setCol?formDialogId=" + formDialogId + "&showStyle=${formDialog.style}"
            });
        });

        //查询表或视图
        $('.choice').on('click', function () {
            var dsName = $("#dataSource option:selected").val();//数据源别名
            var isTable = $("#isTable option:selected").val();//是表或视图
            var objectName = $("#objectName").val();//表名或视图名
            $.ajax({
                url: serverPath.formPath + setter.formLinkPath + 'formQuery/getByDsObjectName',
                type: "post",
                dataType: 'json',
                data: {"dsName": dsName, "isTable": isTable, "objectName": objectName},
                success: function (data) {
                    if (commons._filterRecord(data)) {
                        var result = [];
                        $.each(data.data, function (i) {
                            if (i === "tables") {
                                $.each(data.data.tables, function (a) {
                                    result.push({"queryName": a})
                                });
                            } else {
                                $.each(data.data.views, function (b) {
                                    result.push({"queryName": data.data.views[b]})
                                });
                            }
                        });
                        loadTable(result,'无数据！');
                    } else {
                        layer.alert(data.msg);
                    }
                }
            })
        });

        //将子页面的数据添加到隐藏的textarea
        parent.window.addSetCol = function (conditionfield, resultfield, sortfield, displayfield) {
            $("#textarea").text(JSON.stringify({
                "conditionfield": conditionfield,
                "resultfield": resultfield,
                "sortfield": sortfield,
                "displayfield": displayfield
            }));
        };
        //编辑时获取父页面隐藏的textarea
        parent.window.getArea = function () {
            return $("#textarea").text();
        };

        function loadTable(result,msg) {
            table.render({
                elem: '#tableList'
                , data: result
                , page: false
                , limit: 10000
                , height: 'full-340'
                , toolbar: "#headerToolBar"
                , defaultToolbar: []
                , text: {
                    none: msg //默认：无数据
                }
                , cols: [[
                    {type: 'radio'}
                    , {field: 'queryName', title: '名称', width: 516, align: 'center'}
                ]]
            });
        }

        //工具监听
        var objectName;
        table.on('toolbar(tableList)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            var data = checkStatus.data; //获取选中行数据
            var dsName = $("#dataSource option:selected").val();//数据源别名
            var isTable = $("#isTable option:selected").val();//是表或视图
            switch (obj.event) {
                case 'setCol':
                    if (data === "" || data.length === 0) {
                        parent.layer.alert("请先选择数据库表");
                    } else {
                        objectName = data[0]["queryName"];//所选的表名或视图名
                        parent.layer.open({
                            type: 2,
                            title: "设置列",
                            shade: 0.3,
                            area: ['1100px', '600px'],
                            content: serverPath.formPath + setter.formLinkPath + "formDialog/view/setCol?dsName=" + dsName + "&isTable=" + isTable + "&objectName=" + objectName + "&showStyle=" + showStyle
                        });
                    }
                    break;
            }
        });
        //将子页面的数据添加到隐藏的textarea
        parent.window.addSetCol = function (conditionfield, resultfield, sortfield, displayField) {
            $("#textarea").text(JSON.stringify({
                "conditionfield": conditionfield,
                "resultfield": resultfield,
                "sortfield": sortfield,
                "displayfield": displayField
            }));
        };
        //关闭弹窗
        $(".cancel").click(function () {
            parent.layer.close(parent.layer.getFrameIndex(window.name));
        });
        //保存方法
        form.on('submit(dialogForm)', function (data) {
            if ($("#textarea").text() === "") {
                parent.layer.alert("当前选择的表(视图)未设置显示的列!");
                return false;
            }
            data.field.style = '${formDialog.style}';
            if (formDialogId === "") {
                data.field.dsname = $("#dataSource option:selected").text();//数据源名称
                data.field.objName = objectName;//表名或视图名
                data.field.style = showStyle;
            }
            var allField = JSON.parse($("#textarea").text());
            data.field.dsname = $("#dataSource option:selected").text();//数据源名称
            data.field.objName = objectName;//表名或视图名
            data.field.conditionfield = JSON.stringify(allField.conditionfield);
            data.field.resultfield = JSON.stringify(allField.resultfield);
            if (data.field.style == 1) {
                data.field.displayfield = allField.displayfield;
            } else {
                data.field.displayfield = JSON.stringify(allField.displayfield);
            }
            if (allField.displayfield.length === 0) {
                parent.layer.alert("请在设置列中选择显示字段!");
                return false;
            }
            if (allField.resultfield.length === 0) {
                parent.layer.alert("请在设置列中选择返回字段!");
                return false;
            }
            data.field.sortfield = JSON.stringify(allField.sortfield);
            data.field.id = formDialogId;

            $.ajax({
                url: serverPath.formPath + setter.formLinkPath + "formDialog/add",
                type: "POST",
                contentType: 'application/json',
                dataType: 'json',
                data: JSON.stringify(data.field),
                success: function (result) {
                    if (commons._filterRecord(result)) {
                        layer.alert(result.msg, {skin: 'btn-class'}, function () {
                            commons.bulletWindow(parent.layer.getFrameIndex(window.name));
                            parent.layui.table.reload('formDialog', {
                                page: {
                                    curr: 1
                                }
                            });
                            parent.layui.totalFilter.init('formDialog');
                        });
                    } else {
                        layer.alert(result.msg, {skin: 'btn-class'});
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    layer.alert("保存失败！" + XMLHttpRequest.status);
                }
            });
            return false;
        });

        $("input[name='name']").change(function () {
            var str = $(this).val();
            if (str == "") return;
            var arrRslt = component.chineseToPinyinAlias(str);
            $("#dialogAlias").val(arrRslt[0]);
        });
        //编辑时获取父页面隐藏的textarea
        parent.window.getArea = function () {
            return $("#textarea").text();
        };
    })
</script>
<style>
    body {
        background: #fff;
    }

    .layui-table-tool {
        background: #fff;
        margin-top: -20px;
        padding-left: 0;
    }

    .layui-table-tool-temp {
        padding-top: 7px;
    }

    .layui-table-body {
        overflow-x: hidden;
    }

    .layui-table-box {
        border: 1px solid #f2f2f2;
    }

    .layui-table-view {
        border: none;
    }

    .tableSelect .layui-unselect {
        width: 80px;
        float: left;
        margin-right: 5px;
    }

    .tableSelect .layui-form-select .layui-input {
        width: 80px;
    }

    .tableSelect .layui-form-select dl {
        width: 80px;
    }

    .page .layui-form-radio {
        margin-top: 0
    }

    #pages .layui-form-select {
        position: absolute;
        width: 223px;
        top: 0;
        left: 459px;
    }
</style>
</body>
</html>
